<template>

  <div id="wrapper">
    <div class="page-index" id="home" data-log="首页">
      <div class="index-header">
        <div class="search_bar">
          <a href="/1/#/search/index">
            <span class="icon icon-search"></span>
            <span class="text">搜索商品名称</span>
          </a>
        </div>
        <div class="search_bottom"></div>
      </div>

      <!--焦点图-->
      <section class="slider">
        <div class="flexslider">
          <ul class="slides">
            <li v-for="slide in slides">
              <a :href="slide.url"><img :src="slide.thumb"/></a>
            </li>

          </ul>
        </div>
      </section>

      <!--推荐商品-->
      <div class="list">
        <div class="section">
          <div class="mcells_auto_fill">
            <div class="body">
              <div v-for="banner in banners">
                <div class="items">
                  <img :src="banner.thumb">
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="section" v-for="product in products">
          <div>
            <router-link :to="{name:'Show',params:{id:product.id}}" class="item">
              <div class="img">
                <img class="ico" :src="product.thumb">
                <img class="tag " src="http://c1.mifile.cn/f/i/f/mishop/iic/xp.png">
              </div>
              <div class="info">
                <div class="name"><p>{{product.name}}</p></div>
                <div class="brief"><p>{{product.description}}</p></div>
                <div class="price"><p>{{product.price}}元 起</p></div>
              </div>
            </router-link>
          </div>
        </div>
      </div>

      <my-footer></my-footer>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        slides: [],
        banners: [],
        products: [],
      }
    },
    created() {
      this.init(); //初始化
    },
    updated() {
      $('.flexslider').flexslider({
        animation: "slide",
        directionNav: false
      });
    },
    methods: {
      init: function () {
        this.axios.get(``)
          .then((response) => {
            // console.log(response.data.banners);
            this.slides = response.data.slides;
            this.banners = response.data.banners;
            this.products = response.data.products;
          })
      },
    }
  }
</script>
